<template>
    <div>
      <ul v-if="list.length > 0" style="list-style: none">
        <li v-for="info in list" :key="info.id">
          <!--<a href="javascript:;">{{info.title}}</a>-->
          <router-link :to="`/Home/Message/${info.id}`">{{info.title}}</router-link>
          <button style="margin-left: 10px" @click="pushFn(info.id)">push</button>
          <button style="margin-left: 10px" @click="replaceFn(info.id)">replace</button>
        </li>
      </ul>
      <img v-else  width="100" src="./img/loading.gif">
      <router-view></router-view>
      <button @click="backFn">back</button>
    </div>
</template>

<script>
    //死数据 照理应该在数据库中
    const list = [
      {id:0,title:"1号瓜"},
      {id:1,title:"2号瓜"},
      {id:2,title:"3号瓜"}
    ]
    export default {
        name: "Message",
        data(){
          return {
            list:[]
          }
        },
        mounted(){
          //发送请求 获取所有的新闻标题列表
          setTimeout(()=>{
            this.list = list;
          },2000)
        },
        methods:{
          pushFn(id){
            this.$router.push({
              // path:`/Home/Message/${id}`
              name:"MessageDetail",
              params:{id}
            })
          },
          replaceFn(id){
            this.$router.replace({
              // path:`/Home/Message/${id}`
              name:"MessageDetail",
              params:{id}
            })
          },
          backFn(){
            this.$router.go(-1)
          }
        }
    }
</script>

<style scoped>

</style>
